<template>
  <div class="bill-manage-container">
    <el-form class="flex-row topFilter" style="padding: 0 10px;">
      <el-form-item label="结算时间"  class="flex-row marginR10 marginB10">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="开始日期" v-model="filterFormat.startDate" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="结束日期" v-model="filterFormat.endDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="订单号" class="flex-row marginR10 marginB10"><el-input v-model="filterFormat.orderNO" placeholder="请输入订单号"></el-input></el-form-item>
      <el-form-item label="服务项目" class="flex-row marginR10 marginB10">
        <el-select v-model="filterFormat.itemId" clearable placeholder="全部项目">
          <el-option v-if="item.code=='normal'" v-for="item in allItems" :key="item.id"  :label="item.name"  :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账单状态" class="flex-row marginR10 marginB10">
        <el-select v-model="filterFormat.status" clearable placeholder="全部状态">
          <el-option  v-for="item in billStatus" :key="item.type"  :label="item.title"  :value="item.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="护士" class="flex-row marginR10 marginB10"><el-input v-model="filterFormat.nur" placeholder="请输入护士姓名或工号"></el-input></el-form-item>
      <el-button type="primary" size="small" class="baseBtn" @click="searchAction">查询</el-button>
      <el-button type="primary" size="small" class="baseBtn" @click="resetFormat">重置</el-button>
    </el-form>
    <el-table v-loading="loading" :data="tableData" :height="tableHeight" style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="orderStatus" label="账单状态" width="100" header-align="center" align="left"></el-table-column>
      <el-table-column prop="orderIdVO" label="订单编号" width="200" header-align="center" align="center"></el-table-column>
      <el-table-column prop="dateTime" label="结算时间" width="180" header-align="center" align="left"></el-table-column>
      <el-table-column prop="serviceItem" label="服务项目" width="220" header-align="center" align="center"></el-table-column>
      <el-table-column prop="nurName" label="护士" width="200" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalService" label="服务费" width="140" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalPackage" label="耗材费" width="140" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalTaxi" label="车程费" width="140" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalActual" label="结算总金额" width="140" header-align="center" align="center"></el-table-column>
      <el-table-column prop="name" label="操作" header-align="center" align="center">
        <template slot-scope="scope">
          <div class="detailBtn" @click="showDetail(scope)">订单详情</div>
          <div class="detailTrack" @click="showTrack(scope)">订单跟踪</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="bottomPage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currPage"
      :page-sizes="[10, 20, 30, 40,50,100]"
      :page-size.sync="pageSize"
      :background="true"
      layout="sizes, prev, pager, next, total"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="dialogTrackVisible" width="940" height="790" class="trackDiag">
      <div slot="title"><i class="el-icon-location-outline"></i><span>订单追踪</span></div>
      <OrderTrack :row="selRow" @CloseTable="CloseTrackTable"></OrderTrack>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTrackVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogDetailVisible" :show-close="false" class="detailDialog" :fullscreen="true">
      <OrderDetail :row="selRow" @CloseTable="CloseDetailTable"></OrderDetail>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderPay,getItemPay,getBillStatus} from "@/api/service/ordermanage";
import { convertToCNY} from "@/utils/currency";
import OrderDetail from '@/views/service/orderDetail/index.vue';
import OrderTrack from '@/views/service/orderManage/orderTrack.vue';
  
export default {
  name: "BillManage",
  components: {
    OrderDetail,OrderTrack
  },
  data() {
    return {
      loading: false,
      filterFormat:{
        startDate:'', //开始日期
        endDate:'',
        orderNO:'', //订单号
        status:'', //账单状态
        nur:'', //护士
        itemId:'', //服务项目
      },
      currPage:1,
      allItems:[],
      billStatus:[],
      tableHeight:400,
      tableData: [],
      currPage:1,
      pageSize:10,
      total:0,
      dialogTrackVisible:false,
      dialogDetailVisible:false,
      selRow:{}
    };
  },
  created() {
    this.tableHeight = document.documentElement.clientHeight - 50 - 46 - 52 - 80
    this.loadBillList();
    this.loadItemPay();
    this.loadStatusPay();
  },
  beforeRouteLeave (to, from, next) {
    if(this.dialogDetailVisible){
      this.dialogDetailVisible = false;
      return
    }
    this.dialogDetailVisible = false; 
    this.dialogTrackVisible = false
    next()
  },
  methods: {
    loadBillList(){
      this.loading = true;
      let params = {labelStatus:'',page:this.currPage-1,size:this.pageSize}
      getOrderPay(params).then(response => {
        this.loading = false;
        if(response.code!=200){
          this.$message.error(response.msg);
          return
        }
        if(!response.data){
          this.tableData = []
          return
        }
        
        if(this.currPage == 1){
          this.total = response.data.totalElements;
        }
        let arr = response.data.content;
        let newArr = []
        for(let i = 0;i < arr.length;i++){
          let serviceStr = this.dealArrToStr(arr[i].orderInfo.serviceItems.items,'name')
          let nurName = this.dealArrToStr(arr[i].nurseInfo,'name')
          newArr.push({
            "orderId":arr[i].orderId,
            "orderStatus":arr[i].orderStatus, //账单状态
            "orderIdVO":arr[i].orderIdVO, //订单编号
            "dateTime":arr[i].orderSettleTime, //结算时间
            "serviceItem":serviceStr, //服务项目
            "nurName":nurName, //护士
            "totalService":this.convertMoney(arr[i].orderInfo.serviceItems.amount), //服务费
            "totalPackage":this.convertMoney(arr[i].orderInfo.packageItems.amount), //耗材费
            "totalTaxi":this.convertMoney(arr[i].orderInfo.taxiItems.amount), //车程费
            "totalActual":this.convertMoney(arr[i].orderInfo.totalActual), //结算总金额
          })
        }
        this.tableData = newArr
      }).catch(res => {
        this.loading = false;
        this.$message.error(res);
      });
    },
    dealArrToStr(arr,keyStr){
      let str = ''
      for(let j = 0;j < arr.length;j++){
        if(str != ''){
          str += ','
        }
        str += arr[j][keyStr]
      }
      return str
    },
    handleClick() {
      this.currPage = 1
      this.loadBillList()
    },
    handleSizeChange(){
      this.currPage = 1
      this.loadBillList()
    },
    handleCurrentChange(){
      this.loadBillList()
    },
    searchAction(){
      this.currPage = 1
      this.loadBillList()
    },
    resetFormat(){
      this.filterFormat = {
        startDate:'', //开始日期
        endDate:'',
        orderNO:'', //订单号
        status:'', //账单状态
        nur:'', //护士
        itemId:'', //服务项目
      }
    },
    showDetail(scope){
      this.selRow = scope.row
      this.dialogDetailVisible = true
    },
    showTrack(scope){
      this.selRow = scope.row
      this.dialogTrackVisible = true
    },
    CloseTrackTable(){
      this.dialogTrackVisible = false
    },
    CloseDetailTable(){
      this.dialogDetailVisible = false
    },
    convertMoney(amount){
      return convertToCNY(amount)
    },
    loadItemPay(){
      getItemPay({}).then(response => {
        if(response.data){
          this.allItems = response.data;
          
        }
      }).catch(res => {

      });
    },
    loadStatusPay(){
      getBillStatus({}).then(response => {
        if(response.data){
          this.billStatus = response.data;
        }
      }).catch(res => {

      });
    }
  }
};
</script>

<style>
.bill-manage-container{
  padding-top: 10px;
  .flex-row{
    display: flex;
  }
  .topFilter{
    .el-form-item__label{
      white-space: nowrap;
    }
    .el-select-dropdown__item{
      color: #606266;
    }
  }
  .baseBtn{
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    line-height: 36px;
  }
  .marginR10{
    margin-right: 10px;
  }
  .marginB10{
    margin-bottom: 10px;
  }
  .el-pagination__total{
    float: right;
  }
  .bottomPage{
    margin-top: 10px;
    background: #F8F8F8;
  }
  .detailBtn,.detailTrack{
    color: #3399F4;
  }
  .detailTrack{
    margin-top: 5px;
  }

  .trackDiag .el-dialog__header{
    padding: 0;
  }
  .trackDiag .el-dialog__headerbtn{
      top: 10px;
      right: 15px
  }
  .trackDiag .el-dialog__headerbtn .el-dialog__close{
    color: #BEBEBE;
  }
  .track-header{
    display: flex;
    align-items: center;
    border-bottom: solid 1px #DBDBDB;
    height: 36px;
    padding-left: 10px;
  }
  .detailDialog {
    .el-dialog__header,.el-dialog__body{
      padding: 0;
    }
  }
  .trackDiag {
    .el-dialog__header,.el-dialog__body{
      padding: 0;
    }
    .el-dialog__header{
      padding: 10px;
      border-bottom: solid 1px #DBDBDB;
      .el-dialog__headerbtn{
        top: 10px;
        right: 10px;
      }
    }
    .el-dialog__body{
      padding-top: 10px;
      padding-bottom: 10px;
      .flex-row{
        display: flex;
        margin-top: 10px;
        .dealTip{
          width: 65px;
          margin-right: 10px;
          height: 30px;
          line-height: 40px;
        }
        .dealCon{
          flex: 1;
        }
      }
    }
    .dialog-footer{
      text-align: center;
    }
  }
}
</style>